<template>
  <div class="common-layout">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <el-form style="margin-top: 20px" :model="queryParam" ref="queryRef" :inline="true">

          <el-form-item label="组号" prop="group">
            <el-input clearable v-model="groupNum"
                      style="width: 200px;"
                      @blur="inputKeyUpEvent"
                      placeholder="请输入组号(1-18)"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getSelectRecordData">筛选</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row style="font-size: 12px">记录列表</el-row>
        <el-table border :data="wordStudyList" >
          <el-table-column label="编号" align="center" prop="practice"/>
          <el-table-column label="组名" width="80" align="center" prop="complete"/>
          <el-table-column label="学习个数" width="80" align="center" prop="correctNum" />
          <el-table-column label="总个数" width="80" align="center" prop="wordNum" />
          <el-table-column label="学习时间" width="180" align="center" prop="createTime" />
          <el-table-column label="完成率" width="80" align="center" prop="correctRate" >
            <template #default="scope">
              <span>{{ parseInt(scope.row.correctRate * 100).toFixed(0) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="用时" align="center" prop="usedTime" />
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="size > 0"
            :total="size"
            v-model:page="queryParam.pageNum"
            v-model:limit="queryParam.pageSize"
            @pagination="getRecordData"
        />
      </el-col>
      
      <el-col :sm="24" :lg="12" style="padding-left: 20px;padding-right: 20px">
        <el-form style="margin-top: 20px" :model="queryParam" ref="queryRef" :inline="true">

          <el-form-item label="编号" prop="group">
            <el-input clearable v-model="idNum"
                      style="width: 200px;"
                      @blur="studyRecordDetail"
                      placeholder="请输入编号后四位"></el-input>
          </el-form-item>

        </el-form>
        <el-row style="font-size: 12px">记录详情</el-row>
        <el-table
            border
            v-loading="loading"
            :data="pageData"
            ref="mainTable"
            stripe
        >
          <el-table-column type="selection" v-if="false" width="40" align="center"/>
          <el-table-column label="编号" v-if="false" width="210" prop="_id"/>
          <el-table-column label="单词/词组" align="center" prop="name"/>
          <el-table-column label="词性以及中文" align="center" prop="chinese"/>
          <el-table-column label="学习时间" align="center" width="180" prop="time"/>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup >
import {ref} from "vue";
import {listStudy_record} from "@/api/word/wordRecord.js";
import useUserStore from "@/store/modules/user.js";
import {isNumberStr} from "@/utils/index.js";
import {getStudyDetailsList} from "@/api/senior/index.js";

const { proxy } = getCurrentInstance()
let queryParam = ref({
  type: 'senior',
  pageNum: 1,
  userId: useUserStore().id,
  pageSize: 10
})

let groupNum = ref()
let idNum = ref()
let idList = ref([])

let pageData = ref([])
let size = ref(0)
let wordStudyList = ref([])
let loading = false

initPage()

function initPage(){
  getRecordData()
  // handleQuery()
}

function inputKeyUpEvent() {
  if (groupNum.value === undefined || groupNum.value === '') {
    return
  }
  if (!isNumberStr(groupNum.value) || groupNum.value % 1 !== 0) {
    proxy.$modal.msgWarning("组号必须为整数")
    return
  }
  if (groupNum.value > 18 || groupNum.value < 1) {
    proxy.$modal.msgWarning("组号必须在1-18之间")
  }
}

//查询学习记录详情
function studyRecordDetail(){
  // console.log(idList.value)
  if(idNum.value === undefined){
    return
  }
  let id = idList.value.find(item => item.toString().substring(item.toString().length - 4) === idNum.value)
  // console.log(id)
  if (id === undefined){
    proxy.$modal.msgWarning("未查询到组号为" + idNum.value +  "的数据")
    return
  }
  let param = {
    practice: id
  }
  getStudyDetailsList(param).then((res) => {
    if (res.code === 200) {
      // console.log(res)
      pageData.value = res.data
    }
  })
}

function getRecordData(){
  listStudy_record(queryParam.value).then(res => {
    // console.log(queryParam.value)
    wordStudyList.value = res.rows
    // console.log(res)
    size.value = res.total

    idList.value = []
    wordStudyList.value.forEach((item)=>{
      idList.value.push(item.practice)
    })
  })
}

function resetQuery(){
  groupNum.value = null
  queryParam.value.complete = null
  getRecordData()
}

function getSelectRecordData(){
  // console.log(groupNum.value)
  if (groupNum.value === undefined || groupNum.value === '') {
    proxy.$modal.msgWarning("请输入组号")
    return
  }
  queryParam.value.complete = groupNum.value
  getRecordData()
}

</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
